// API配置接口
export interface ApiConfig {
  method: 'GET' | 'POST' | 'PUT' | 'DELETE'
  url: string
  headers?: Record<string, string>
  body?: Record<string, any>
}

// 组件配置接口
export interface ComponentConfig {
  id: string // 唯一ID
  type: string // 组件类型，如 'button', 'input'
  props: Record<string, any> // 属性，如 { text: '提交', max: 100 }
  style?: Record<string, string> // 样式
  events?: {
    onClick?: ApiConfig
    onChange?: ApiConfig
    onInput?: ApiConfig
  }
  children?: ComponentConfig[] // 嵌套组件
  position?: {
    x: number
    y: number
  }
  size?: {
    width: number
    height: number
  }
  // 组合相关字段
  isGroup?: boolean // 是否为组合组件
  groupId?: string // 组合ID
  originalPosition?: { x: number; y: number } // 合并前的相对位置
}

// 组件类型定义
export type ComponentType = 
  // 基础交互组件
  | 'button'
  | 'link'
  | 'icon'
  | 'text'
  | 'label'
  | 'image'
  // 表单输入类组件
  | 'input'
  | 'textarea'
  | 'password'
  | 'number-input'
  | 'search'
  // 选择类组件
  | 'radio-group'
  | 'checkbox-group'
  | 'switch'
  | 'select'
  | 'slider'
  | 'rate'
  // 时间日期类组件
  | 'date-picker'
  | 'time-picker'
  | 'datetime-picker'
  | 'range-picker'
  // 数据展示类组件
  | 'tag'
  | 'badge'
  | 'progress'
  | 'loading'
  | 'tooltip'
  | 'alert'
  // 数据容器类组件
  | 'table'
  | 'list'
  | 'tree'
  | 'collapse'
  | 'tabs'
  | 'carousel'
  // 文件与媒体类组件
  | 'upload'
  | 'download'
  | 'audio'
  | 'video'
  // 交互与反馈类组件
  | 'modal'
  | 'drawer'
  | 'steps'
  | 'breadcrumb'
  | 'pagination'
  // 其他组件
  | 'qrcode'
  | 'pin-input'
  | 'map'
  | 'calendar'
  | 'rich-editor'
  | 'code-editor'
  // 特殊组件
  | 'group' // 组合组件

// 组件分类
export interface ComponentCategory {
  id: string
  name: string
  components: ComponentTemplate[]
}

// 属性配置定义
export interface PropConfig {
  type: 'string' | 'number' | 'boolean' | 'select' | 'color' | 'url' | 'textarea' | 'options'
  label: string
  default?: any
  options?: { label: string; value: any }[]
  min?: number
  max?: number
  step?: number
  placeholder?: string
  rows?: number
}

// 组件模板（用于组件库展示）
export interface ComponentTemplate {
  type: ComponentType
  name: string
  icon: string
  defaultProps: Record<string, any>
  propConfigs?: Record<string, PropConfig>
  defaultStyle?: Record<string, string>
  description?: string
}

// 拖拽事件数据
export interface DragData {
  type: 'component' | 'move'
  componentType?: ComponentType
  componentId?: string
}

// 画布状态
export interface CanvasState {
  components: ComponentConfig[]
  selectedComponentIds: string[] // 改为支持多选
  scale: number
  gridSize: number
  showGrid: boolean
}

// 历史记录
export interface HistoryRecord {
  id: string
  timestamp: number
  components: ComponentConfig[]
  description: string
}

// 页面配置
export interface PageConfig {
  id: string
  name: string
  components: ComponentConfig[]
  createdAt: number
  updatedAt: number
}

// 页面状态
export interface PageState {
  pages: PageConfig[]
  currentPageId: string | null
}
